<template>
	<div class="car_detail">
		<!-- 用户行为分析详情 -->
		<div class="headline flex">
			<div @click="goUrl">返回列表></div>
			<div>VIN:{{ routeParams.vin }}</div>
			<div>磷酸铁锂</div>
			<div>20Ah</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<div class="content_left">
				<div class="charge_car">
					<ChargeCar :vinData="routeParams.vin"></ChargeCar>
					<Title analysisTitle="充电量趋势分析"></Title>
					<div class="trend bgItem">
						<a-date-picker @change="dateselect" size="small" class="dateTrend" v-model:value="value5" valueFormat="YYYY" picker="year" />
						<div class="trend_left">
							<Bar :chartData="barData" :barLed="barLed" height="260px" />
						</div>
						<div class="trend_right">
							<Circle :cirLed="cirLed" :chartData="cirData" height="16.25rem" />
							<div class="cir_tit">*春季（3月-5月） 夏季（6月-8月） 秋季（9月-11月） 冬季（12月-2月）</div>
						</div>
					</div>
					<Title analysisTitle="柔性充电分析"></Title>

					<div class="trend trend_num bgItem">
						<div class="trend_tit">
							<div>柔性系数</div>
							<div>平均柔性充电系数：<span style="color: #24b496">0.14</span></div>
							<div>*数据取自近20次充电订单</div>
						</div>
						<BrokenLine :chartData="carServeData" :lineLed="lineLed" height="260px" />
					</div>
				</div>
			</div>
			<div class="content_right">
				<ContentRight :vinData="routeParams.vin"></ContentRight>
			</div>
		</div>
		<!-- 近期订单 -->

		<div class="order">
			<Title analysisTitle="近期订单"></Title>
			<div class="order_sel">
				<div class="">
					<span>充电日期：</span>
					<a-range-picker style="width: 250px" v-model:value="valueCharge" @change="dateselect2" valueFormat="YYYY-MM-DD hh:mm:ss" />
				</div>
				<!-- <div>
					<span>充电站：</span>
					<a-select v-model:value="stateSel" style="width: 8rem" @change="handleCitySel">
						<a-select-option v-for="item in optionCity" :value="item.value">{{ item.label }}</a-select-option>
						<a-select-option v-for="item in optionCity" :value="item.value">{{ item.label }}</a-select-option>
					</a-select>
				</div>
				<div>
					<span>告警信息：</span>
					<a-checkbox-group v-model:value="state.checkedList" :options="plainOptions" />
				</div> -->
			</div>

			<!-- Table -->
			<div class="table_bom">
				<a-table :columns="orderColumns" :data-source="orderData" :pagination="pagination" bordered> </a-table>
			</div>
		</div>
	</div>
</template>

<script lang="js" name="test-bizWarningInfo" setup>
	import {ref, reactive, computed, unref} from 'vue';
	import Title from './components/Title.vue';
	import ChargeCar from './components/ChargeCar.vue';
	import ContentRight from './components/ContentRight.vue';

	import Bar from '../OverviewAnalysis/components/chart/BarGroud.vue'; // './components/chart/BarGroud.vue';
	import Circle from '../OverviewAnalysis/components/chart/Circle.vue';
	import BrokenLine from '../OverviewAnalysis/components/chart/BrokenLine.vue';
	import {getchargingCapacityTrendAnalysis, getuserAnalysislist} from '@/api/screen/UserAnalysisdetails.js';
	//goUrl
	import {useRouter} from 'vue-router';
	import dayjs from 'dayjs';

	const router = useRouter();
	const routeParams = ref(router.currentRoute.value.query);
	console.log('routeParams-routeParams', router.currentRoute.value);

	function goUrl(record) {
		router.push({
			path: '/ChargingBehaviorAnalysis/UserAnalysis',
			query: {
				// 传入当前的路由，登录成功后跳转到当前路由
				// stationId: record.id,
			},
		});
	}

	const barLed = {
		background: '#0c182d',
		xLine: '#6d6d6d',
		label: '#7d8590',
		xUnit: '',
		yUnit: '充电量（度）',
	};

	const carServeData = [
		{name: '1', value: 2987},
		{name: '2', value: 4987},
		{name: '3', value: 5987},
		{name: '4', value: 7987},
		{name: '5', value: 9987},
		{name: '6', value: 3987},
		{name: '7', value: 2987},
		{name: '8', value: 6987},
		{name: '9', value: 8987},
		{name: '10', value: 4987},
		{name: '11', value: 3987},
		{name: '12', value: 6987},
	];
	const lineLed = {
		xLine: '#6d6d6d',
		label: '#7d8590',
		lineColorBegin: '#165b5a',
		lineColorEnd: '#0d2133',
		xUnit: '',
		yUnit: '',
	};
	// 城市
	const stateSel = ref('全部');
	const handleCitySel = () => {};
	const optionCity = [
		{
			value: '全部',
			label: '全部',
		},
		{
			value: '北京',
			label: '北京',
		},
		{
			value: '上海',
			label: '上海',
		},
	];

	const plainOptions = ['有', '无'];
	const state = reactive({
		checkedList: ['有'],
	});

	const orderColumns = [
		{
			title: '充电开始时间',
			dataIndex: 'chargingStartTime',
		},
		{
			title: '充电结束时间',
			dataIndex: 'chargingEndTime',
		},
		{
			title: '充电站',
			dataIndex: 'operatorId_dictText',
		},
		{
			title: '充电桩',
			dataIndex: 'imei_dictText',
		},
		{
			title: '充电电量（度）',
			dataIndex: 'electricEnergy',
		},
		{
			title: '充电时长（分钟）',
			dataIndex: 'chargingTime',
		},
		{
			title: '充电结束soc（%）',
			dataIndex: 'finallySoc',
		},
		{
			title: '停机原因',
			dataIndex: 'chargingClosingDown',
		},
		// {
		// 	title: '告警信息',
		// 	dataIndex: 'name',
		// },
	];

	const paramsData = ref({
		vin: routeParams.value.vin,
		year: dayjs().format('YYYY'),
	});
	onMounted(() => {
		getchargingCapacityTrendAnalysisApi(paramsData.value);
		getuserAnalysisApi(userAnalysisData.value);
	});
	const cirLed = {
		ledColor1: '#767c80',
		ledColor2: '#ffffff',
		ledColor3: '#7d838d',
	};
	const cirData = ref([
		{name: '春季', value: 30},
		{name: '夏季', value: 10},
		{name: '秋季', value: 15},
		{name: '冬季', value: 23},
	]);
	const value5 = ref(dayjs('2025', 'YYYY'));
	const barData = ref([]);
	// for (let i = 0; i < 12; i += 1) {
	// 	barData.value.push({
	// 		name: `${i + 1}`,
	// 		value: Math.floor(Math.random() * 10) + 110,
	// 	});
	// }
	// 订单信息查询分页
	const current = ref(1);
	const pageSize = ref(3);
	const total = ref(0);
	const pagination = computed(() => ({
		total: total.value,
		current: current.value,
		pageSize: pageSize.value,
		showQuickJumper: true,
		showTotal: function () {
			return `共${total.value}条`;
		},
	}));
	const valueCharge = ref([]);

	function dateselect2(params) {
		console.log('dateselect2', params, valueCharge);
		userAnalysisData.value.startTime = params[0];
		userAnalysisData.value.endTime = params[1];
		getuserAnalysisApi(userAnalysisData.value);
	}
	const userAnalysisData = ref({
		vin: routeParams.value.vin,
		pageNo: 1,
		pageSize: 3,
		startTime: dayjs().add(-12, 'M').format('YYYY-MM-DD hh:mm:ss'),
		endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
	});
	const orderData = ref([]);
	function getuserAnalysisApi(params) {
		getuserAnalysislist(params).then((res) => {
			orderData.value = res.records;
			total.value = res.total;
		});
	}
	// 充电量趋势分析
	function getchargingCapacityTrendAnalysisApi(params) {
		getchargingCapacityTrendAnalysis(params).then((res) => {
			barData.value = res.monthVOs.map((item) => {
				return {
					name: item.month,
					value: item.power,
				};
			});
			cirData.value = res.seasonVOs.map((item) => {
				return {
					name: item.season,
					value: item.power,
					rate: item.rate,
				};
			});
		});
	}
	function dateselect(value) {
		paramsData.value.year = value;
		getchargingCapacityTrendAnalysisApi(paramsData.value);
	}
</script>

<style lang="less" scoped>
	:deep(.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled)) {
		background: #010c2a !important;
	}

	:deep(.ant-picker),
	:deep(.ant-input-number) {
		width: 100%;
	}

	:deep(.ant-picker) {
		background: #010c2a !important;
		color: #fff !important;
	}

	:deep(.ant-picker-input > input) {
		color: #fff !important;
	}

	:deep(.ant-picker-input > input::placeholder, .ant-picker-separator) {
		color: #fff !important;
	}

	:deep(.ant-picker-separator) {
		color: #fff !important;
	}

	:deep(.ant-picker-suffix) {
		color: #fff !important;
	}

	:deep(.ant-select-selector) {
		background: #010c2a !important;
	}

	:deep(.ant-select-selection-item) {
		background: #010c2a !important;
	}

	:deep(.ant-select-selection-item) {
		background: #010c2a !important;
		color: #fff !important;
	}

	:deep(.ant-select-arrow) {
		background: #010c2a !important;
		color: #fff !important;
	}

	:deep(.ant-picker-dropdown .ant-picker-panel) {
		background: #010c2a !important;
		color: #fff !important;
	}

	:deep(.ant-checkbox-wrapper) {
		color: #fff !important;
	}

	:deep(.ant-table-thead > tr > th) {
		padding: 0.5rem !important;
	}

	//  table
	:deep(.ant-table-wrapper .ant-table-thead > tr > th) {
		background: #010c2a !important;
		color: #cacaca !important;
		border: solid 1px #4a5d82 !important;
		border-inline-end: solid 1px #4a5d82 !important;
	}

	:deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table) {
		border-top: none !important;
	}

	:deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container) {
		border-inline-start: none !important;
	}

	// table_body
	:deep(.ant-table-cell) {
		background: #010c2a !important;
		color: #cacaca !important;
		border: solid 1px #4a5d82 !important;
		border-inline-end: solid 1px #4a5d82 !important;
	}

	:deep(.ant-empty-description) {
		color: #cacaca !important;
	}

	// 分页
	:deep(.ant-pagination .ant-pagination-item a) {
		color: #d9d9d9;
	}

	:deep(.ant-pagination-item-ellipsis) {
		color: #d9d9d9 !important;
	}

	:deep(.ant-pagination .ant-pagination-prev .ant-pagination-item-link) {
		color: #d9d9d9 !important;
		background: #010c2a !important;
	}

	:deep(.ant-pagination .ant-pagination-next .ant-pagination-item-link) {
		color: #d9d9d9 !important;
		background: #010c2a !important;
	}

	:deep(.ant-pagination .ant-pagination-options-quick-jumper) {
		color: #d9d9d9 !important;
	}

	:deep(.ant-pagination .ant-pagination-options-quick-jumper input) {
		background: #010c2a !important;
		color: #d9d9d9 !important;
	}

	:deep(.ant-pagination-total-text) {
		color: #d9d9d9 !important;
	}

	.car_detail {
		background: #010c2a;
		padding: 1.25rem;

		.headline {
			height: 2.375rem;
			align-items: center;
			margin-bottom: 1.25rem;

			div:nth-child(1) {
				cursor: pointer;
				font-size: 0.875rem;
				color: #00a096;
				margin-right: 0.625rem;
			}

			div:nth-child(2) {
				line-height: 2.375rem;
				font-size: 1.75rem;
				color: rgba(255, 255, 255, 0.996078431372549);
			}

			div:nth-child(3) {
				font-size: 0.875rem;
				color: #1890ff;
				height: 1.5rem;
				width: 4.875rem;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				border: solid 1px #41a4ff;
				text-align: center;
				border-radius: 2px;
				background: #293e73;
				margin: 0 0.625rem 0 0.375rem;
			}

			div:nth-child(4) {
				color: #f4e7e7;
				font-size: 0.875rem;
			}
		}

		.content {
			min-height: 25.75rem;
			display: flex;
			justify-content: space-between;

			.content_left {
				width: 68%;
				min-width: 964px;
				margin-right: 2%;

				.trend {
					width: 100%;
					height: 16.25rem;
					position: relative;
					display: flex;
					background-color: rgba(12, 24, 45, 1);
					margin-bottom: 1.25rem;

					.dateTrend {
						position: absolute;
						right: 1.25rem;
						top: 0.875rem;
						width: 6.75rem;
						z-index: 100;
					}

					.trend_left {
						width: 60%;
					}

					.trend_right {
						width: 40%;
						position: relative;

						.cir_tit {
							position: absolute;
							width: 74%;
							bottom: 10px;
							right: 10%;
							font-size: 12px;
							color: #929ea9;
							text-align: center;
						}
					}

					.trend_tit {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 1.25rem;
					}
				}

				.trend_num {
					display: block;
					color: #7d8590;
					font-size: 0.875rem;
					padding-top: 0.5rem;

					div:nth-child(3) {
						font-size: 0.75rem;
					}
				}
			}

			.content_right {
				width: 30%;
				min-width: 420px;
			}
		}

		.order {
			height: 25rem;
			min-width: 1400px;

			.order_sel {
				margin-bottom: 1.25rem;
				padding-top: 0.75rem;
				padding-left: 1.25rem;
				display: flex;
				align-items: center;
				color: #9e9e9e;

				div {
					margin-right: 1.25rem;
				}
			}
		}
	}

	.bgItem {
		background-image: linear-gradient(transparent 10px, #0c182d 10px, #0c182d calc(100% - 10px), transparent calc(100% - 10px), transparent 100%), linear-gradient(90deg, transparent 10px, #0c182d 10px, #0c182d calc(100% - 10px), transparent calc(100% - 10px), transparent 100%), linear-gradient(#6f9bdd 1px, transparent 1px, transparent calc(100% - 1px), #6f9bdd calc(100% - 1px), #6f9bdd 100%), linear-gradient(90deg, #6f9bdd 1px, transparent 1px, transparent calc(100% - 1px), #6f9bdd calc(100% - 1px), #6f9bdd 100%);
		background-repeat: no-repeat;
		background-position:
			top left,
			top left,
			bottom right,
			bottom right;
		background-size:
			100% 100%,
			100% 100%;
	}
</style>
